<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>骑手页面</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios@0.21.4/dist/axios.min.js"></script>
</head>
<body>
<div class="deliverApp">
    <div class="container">
        <h2 class="text-center" style="margin: 30px">骑手数据展示</h2>
        <h4 class="text-center">欢迎{{driver.username}}登录
            <a href="admin/destroy">注销</a>
        </h4>
        <!--关键词查询-->
        <div class="row text-center" style="margin: 20px 0px">
            <div class="col-md-12 text-center">
                <form action="onePage" method="post" class="form-inline">
                    id: <input type="text" class="form-control" name="id" size="3" style="margin-right: 10px">
                    name: <input type="text" class="form-control" name="ename" size="3" style="margin-right: 10px">
                    mobile:<input type="text" class="form-control" name="salary" size="3" style="margin-right: 10px">
                    <button type="submit" class="btn btn-primary">
                        <span class="glyphicon glyphicon-search"></span> 查询
                    </button>
                </form>
            </div>
        </div>
        <div class="row text-right" style="margin: 10px 0px">
            <div class="col-md-4 col-md-offset-8">
                <button class="btn btn-success" data-toggle="modal" data-target="#addModal">
                    <span class="glyphicon glyphicon-plus"></span> 新增
                </button>
                <a href="export" class="btn btn-warning">
                    <span class="glyphicon glyphicon-download"></span> 导出
                </a>
                <a href="batch" class="btn btn-primary">
                    <span class="glyphicon glyphicon-upload"></span> 上传
                </a>
            </div>
        </div>
    </div>
    <!--表格数据展示-->
    <div class="row" style="height: 380px">
        <div class="col-md-12">
            <table class="table-bordered table-hover text-center" style="line-height: 60px;width: 100%">
                <tbody>
                <!--表头-->
                <tr style="font-weight: bold">
                    <td>骑手编号</td>
                    <td>骑手姓名</td>
                    <td>骑手电话</td>
                    <td>骑手基础工资</td>
                    <td>骑手提成</td>
                    <td>骑手加入时间</td>
                    <td>骑手评分</td>
                    <td>骑手头像</td>
                    <td>操作</td>
                </tr>
                <!--表格数据-->
                <tr v-for="deliver in deliverList" :key="user.id">
                    <td>1</td>
                    <td>张三</td>
                    <td>18013765162</td>
                    <td>8000</td>
                    <td>2000</td>
                    <td>2021-10-10</td>
                    <td>5</td>
                    <td>image</td>
                    <td>
                        <button type="button" class="btn btn-info" @click="editImg(user)">修改头像</button>
                        <button type="button" class="btn btn-success" @click="edit(user)">编辑</button>
                        <button type="button" class="btn btn-danger" @click="deleteItem(user.id)">删除</button>
                    </td>
                </tr>
                <!--修改头像模态框-->
                <div class="modal fade" tabindex="-1" role="dialog" id="editImgModal">
                    <div class="modal-dialog" role="document" style="width: 350px">
                        <div class="modal-content">
                            <div class="modal-header" style="background:#499ced; color: #fff">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title text-center">头像修改</h4>
                            </div>
                            <div class="modal-body">
                                <!--头像的预览-->
                                <div class="row" style="margin-bottom: 20px">
                                    <div class="col-md-1 col-md-offset-4">
                                        <img :src="imagePath" width='80' class='img-circle' alt="load...">
                                    </div>
                                </div>
                                <!--上传头像-->
                                <div class="row">
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <label for="img-name" class="control-label col-md-2 col-md-offset-1">姓名</label>
                                            <div class="col-md-8">
                                                <input type="text" id="img-name" class="form-control" :value="uploadData.username" readonly>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="myHead" class="control-label col-md-2 col-md-offset-1">头像</label>
                                            <div class="col-md-8">
                                                <input type="file" id="myHead" class="form-control" @change="preview($event)" >
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-md-10 col-md-offset-1">
                                                <button type="button" class="btn btn-primary btn-block" @click="confirmEditImg()">确认修改</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--编辑员工的模态框-->
                <div class="modal fade" tabindex="-1" role="dialog" id="editModal">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header" style="background:#499ced; color: #fff">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h3 class="modal-title text-center">编辑员工</h3>
                            </div>
                            <div class="modal-body">
                                <form action="editEmp" method="post" class="form-horizontal">
                                    <div class="form-group">
                                        <label for="edit-ename" class="col-sm-2 control-label">用户名</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="edit-ename" v-model="rowUser.username">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="edit-mobile" class="col-sm-2 control-label">手机号</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="edit-mobile" v-model="rowUser.mobile">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="edit-idcard" class="col-sm-2 control-label">身份证号</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" id="edit-idcard"  v-model="rowUser.idCard">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-3 col-sm-6">
                                            <button type="button" class="btn btn-primary btn-block" @click="confirmEdit()">确认修改</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: "#deliverApp",
        data: {
            deliverList: [],/*一页骑手查询数据*/
            pageNumList: [], // 页码集合
            prePage : 0, //上一页
            currentPage :1, // 当前页码
            nextPage:0,  // 下一页
            totalPage: 1,   // 总页数
            keyword : "", // 模糊查询关键词
            rowUser : {id:"",username:"",mobile:"",idCard:""}, // 修改的一行数据
            imagePath : "",
            uploadData : {id: 0, username:"", uploadFile : null} // 文件上传数据
        },
        methods: {
            pre : function () {
                // if(this.prePage == 0){ // 上一页是第一页时
                //     this.onePage(this.totalPage);
                // }else{
                //     this.onePage(this.prePage);
                // }
                // 一句话搞定
                this.onePage(this.prePage == 0?this.totalPage:this.prePage);
            },
            next : function () {
                this.onePage(this.nextPage == 0?1:this.nextPage);
            },
            onePage : function (page) {
                axios({
                    url : "onePage",
                    method : "get",
                    params : {
                        currentPage : page,
                        keyword : this.keyword
                    }
                }).then((value) => {
                    let data = value.data; // 从axios返回值中获取响应正文(data ： 就是Mybatis分页插件查询的PageInfo)
                    if(this.currentPage == 1 && data.size == 0){
                        this.userList = null;
                        return;
                    }else if (data.size == 0){ // 当前这一页的数据为空（再向前查询一页）
                        this.onePage(this.prePage);
                        return ;
                    }
                    this.deliverList = data.list; // 绑定用户集合数据
                    this.pageNumList = data.navigatepageNums; // 获取到页码
                    this.prePage = data.prePage; // 获取到上一页
                    this.nextPage = data.nextPage; // 获取到上一页
                    this.currentPage = data.pageNum; // 当前页码
                    this.totalPage = data.pages; // 总页码
                })
            },
            deleteItem:function (uid) {
                let flag = confirm("您忍心要删除"+uid+"用户吗?");
                if(flag){
                    // 发送异步的删除请求
                    axios.get("delete",{
                        params: {
                            id : uid
                        }
                    }).then((value) => {
                        let resp = value.data;
                        if(resp == "ok"){
                            alert("恭喜，删除成功");
                            this.onePage(this.currentPage);// 数据回显（再次查询下当前页面的数据）
                        }else{
                            alert("删除失败");
                        }
                    })
                }
            },
            edit : function (user) {
                this.rowUser.id = user.id;
                this.rowUser.username = user.username;
                this.rowUser.mobile = user.mobile;
                this.rowUser.idCard = user.idCard;
                $('#editModal').modal('show');
            },
            confirmEdit : function () {  //确认修改
                console.log(this.rowUser)
                // 发送异步请求来更新数据
                axios({
                    url : "edit",
                    method : "get",
                    params: this.rowUser
                }).then((value) => {
                    let resp = value.data;
                    if(resp == "ok"){
                        alert("数据已更新");
                        this.onePage(this.currentPage);// 数据回显（再次查询下当前页面的数据）
                        $('#editModal').modal('hide');
                    }else{
                        alert("数据更新失败");
                    }
                })
            },
            editImg : function (user) {
                // 更新模态框的原始头像
                $('#myHead').val("");
                this.imagePath = user.image; // 原始头像
                this.uploadData.id = user.id; // 隐藏字段
                this.uploadData.username = user.username; // 数据回显

                $('#editImgModal').modal('show');
            },
            preview : function (evt) {
                // 获取到选中的文件 // 图片预览功能
                let file =  evt.target.files[0];
                //判断文件的类型是否是图片 image/xxx
                let imgPattern = /^image\/\w+$/;
                if(!imgPattern.test(file.type)){ // MIME类型的验证
                    alert("请选择正确的图片!");
                    this.value = "";
                    return;
                }
                // 创建一个文件的预览器
                let reader = new FileReader();
                reader.readAsDataURL(file); // 让文件预览器读取图片
                reader.onload = () => {
                    this.imagePath = reader.result;
                }
                // 2.4 保存需要上传的文件
                this.uploadData.uploadFile = file;
            },  // 图片预览
            confirmEditImg : function () {  // 图片上传核心逻辑
                if(this.uploadData.uploadFile == null){
                    alert("请选择需要上传的头像");
                    return ;
                }
                // 开始文件上传
                let formData = new FormData(); //二进制流的表单数据
                formData.append("uid", this.uploadData.id);
                formData.append("myHead", this.uploadData.uploadFile);
                //构建文件上传的参数
                let config = {
                    headers: {
                        "Content-Type" : "multipart/form-data"
                    }
                }
                //发送 axios 请求完成文件的上传
                axios.post("uploadImg",formData, config)
                    .then((resp) => {
                        if(resp.data == "ok"){
                            alert("恭喜，头像已更新!");
                            $('#editImgModal').modal('hide');
                            this.onePage(this.currentPage); // 数据回显
                        }else{
                            alert("很遗憾, 头像更新失败!")
                        }
                    });
            }
        },
        mounted(){  // 挂载成功后执行（数据准备阶段 ：更新Data -> 更新虚拟DOM -> render）
            // 发送一个请求
            this.onePage(1);
        }

    })
</script>
</body>
</html>
